<template>
	<view class="container" :class="skinStyle">
		<view class="tui-cart-cell" v-for="(item, index) in refundList" :key="index" v-if="productFlag">
			<view class="tui-goods-item-wrap" v-if="item.show !== 2">
				<view class="tui-goods-item" style="position: relative;">
					<image src="../../../static/img/gift.png" class="imgMark" v-if="item.isSample === 1 || item.isSample === 2 || item.isSample === 3"></image>
					<image :src="imgSrc + item.suitProductThumbnailImageUrl" v-if="item.isSuit" class="tui-goods-img"></image>
					<image :src="imgSrc + item.productThumbnailImageUrl" v-else class="tui-goods-img" />
					<view class="tui-goods-info">
						<view class="tui-goods-title" v-if="item.isSuit">{{ item.suitName }}</view>
						<view class="tui-goods-title" v-else>{{ item.productName }}</view>
						<view class="tui-goods-model">
							<view class="tui-model-text" v-if="item.isSuit"></view>
							<view class="tui-model-text" v-else>{{ item.specificationName }}</view>
						</view>
						<view class="tui-price-box">
							<view class="tui-goods-price" v-if="item.isSuit">￥{{ item.suitRealPrice }}</view>
							<view class="tui-goods-price" v-else>￥{{ item.productRealPrice }}</view>
							<view v-if="item.isSuit">x{{ item.suitCount }}</view>
							<view v-else>x{{ item.productsCount }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tui-order-item">
			<view class="tui-order-content">
				<view class="tui-order-flex">
					<view class="tui-item-title">退款收件人:</view>
					<view class="tui-item-content">
						{{ people }}
						<view class="copeView" @click="paste(people)">复制</view>
					</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">联系地址:</view>
					<view class="tui-item-content">
						{{ address }}
						<view class="copeView" @click="paste(address)">复制</view>
					</view>
				</view>
			</view>
		</view>
		<view class="">
			<picker @change="companyChange" :value="companyIndex" :range="companyArray">
				<view class="refundInfo" style="display: block;">
					<view class="setupTitle" style="display: inline-block;">物流公司:</view>
					<view class="setupCon" style="display: inline-block;margin-left:60rpx ;">
						<text class="" v-if="companyLabel">{{ companyLabel }}</text>
						<text class="" v-else>请选择</text>
					</view>
				</view>
			</picker>
		</view>
		<view class="codeView">
			<view>
				<text class="codeTitle">物流单号:</text>
				<input type="text" class="codeInput" v-model="logisticsCode" />
			</view>
		</view>
		<view style="color: red; font-size: 28rpx; padding:10rpx 20rpx; line-height: 32rpx;">
			请确认您填写的快递单号准确无误，以确保售后可为您正常处理退换货流程。
		</view>
		<view class="tui-safe-area"></view>
		<view class="bot-btn-wrap fix-bot" :class="[isIOS==1? 'iosPB':'AndroidPB']">
			<mix-button :disabled="uploadImg" text="提交申请" icon="icon-jia2" :iconSize="36" :isConfirm="false" @onConfirm="submit()"></mix-button>
		</view>
		<loading></loading>
		<tui-modal></tui-modal>
	</view>
</template>
<script>
import baseComponent from '@/components/baseComponent/baseComponent';
import footBar from '@/components/footbar/footbar';
import mixin from '@/utils/mixin.js';
import tuiSwipeAction from '@/components/swipe-action/swipe-action';
import tuiButton from '@/components/button/button';
import tuiNumberbox from '@/components/numberbox/numberbox';

import tuiDivider from '@/components/divider/divider';
import tuiLoadmore from '@/components/loadmore/loadmore';
import mixButton from '@/components/mix-button/mix-button.vue';
import mixEmpty from '@/components/mix-empty/mix-empty.vue';
import tuiUpload from '@/components/tui-upload/tui-upload';
export default {
	mixins: [mixin],
	components: {
		baseComponent,
		footBar,
		tuiSwipeAction,
		tuiButton,
		tuiNumberbox,
		tuiDivider,
		tuiLoadmore,
		mixEmpty,
		mixButton,
		tuiUpload
	},

	data() {
		return {
			people: '',
			address: '',
			limit: 3,
			typeFlag: '',
			imgSrc: this.$store.state.imgUrl,
			selectedIndex: 2,
			refundList: [],
			pageId: '',
			nodataFlg: false,
			number: 0,
			isEdit: false,
			productCount: 0,
			upOption: {
				noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				textNoMore: '-- 无更多信息 --'
			},
			allChecked: false,
			totalPrice: 0.0,
			invalid: [],
			refundType: '售后类型',
			refundReason: '售后原因',
			refundProduct: '退款商品',
			typeIndex: '',
			typeArray: ['我要退货退款', '我要换货', '我要退款(无需退货)'],
			typeLabel: '',
			reasonIndex: '',
			reasonArray: ['7天无理由退款', '商品有质量问题', '商品少发漏发发错', '商品与描述不一致', '收到商品时有划痕或破损', '质疑假货', '其他'],
			reasonLabel: '',
			refundMoney: '',
			refundMark: '',
			item: '',
			logisticsCode: '',
			companyIndex: '',
			companyArray: [
				'圆通速递',
				'百世快递',
				'顺丰速运',
				'申通快递',
				'赛澳递',
				'晟邦物流',
				'中通快递',
				'全峰快递',
				'优速快递',
				'极兔速递',
				'邮政EMS',
				'天天快递',
				'京东快递',
				'韵达速递',
				'快捷速递',
				'国通快递',
				'宅急送快递',
				'邮政快递包裹',
				'联邦快递',
				'万象物流',
				'速尔快递',
				'亚马逊物流',
				'跨越速递',
				'USPS',
				'全一快递',
				'远成快运',
				'安能快递',
				'天地华宇',
				'EMS-国际件',
				'新邦物流',
				'新顺丰NSF',
				'日日顺物流',
				'苏宁快递',
				'百世快运',
				'德邦物流'
			],
			companyLabel: '',
			listFlag: '',
			editFlag: '',
			rejectEvidencePath1: '',
			rejectEvidencePath2: '',
			rejectEvidencePath3: '',
			imgArr: [],
			uploadImg: false,
			rejectId: '',
			productFlag: false,
			orderId: '',
			rejectNo: '',
			isIOS:1
		};
	},
	onLoad(options) {
		// #ifdef H5
		   this.$wechat.noShare();
		// #endif
		this.rejectId = JSON.parse(options.id);
		this.getAddress();
		if (options.productFlag) {
			this.productFlag = true;
			this.rejectNo = options.rejectNo;
			this.orderId = options.orderId;
			this.getReturnOrderDetail();
		} else if (options.isEdit == 1) {
			this.isEdit = true;
			const code = JSON.parse(options.rejectExpressOrderNum);
			if (code) {
				this.logisticsCode = options.rejectExpressOrderNum;
			}

			for (let i = 0; i < this.companyArray.length; i += 1) {
				if (this.companyArray[i] == options.rejectExpressCompany) {
					this.companyIndex = i;
					this.companyLabel = this.companyArray[i];
				}
			}
		}
		console.log(this.isEdit);
		console.log(this.productFlag);
	},
	onShow() {
		if(uni.getSystemInfoSync().platform != 'ios'){
			this.isIOS = 2
		}
	},
	methods: {
		moneyFormat(num) {
			var result = parseFloat(num);
			result = Math.round(num * 100) / 100;
			return result;
		},
		getReturnOrderDetail() {
			const params = {
				orderId: this.orderId,
				rejectNo: this.rejectNo
			};
			this.$http.getReturnOrderDetail(params).then(res => {
				if (res.status === 0) {
					//获取各种信息
					this.refundList = [];
					res.data.records.forEach((item3, index3) => {
						if (item3.rejectStatus === 0 || item3.rejectStatus === 3) {
							this.refundList.push(item3);
						}
					});
					for (let i = 0; i < this.reasonArray.length; i += 1) {
						if (this.reasonArray[i] == this.refundList[0].refundReason) {
							this.reasonIndex = i;
							this.reasonLabel = this.reasonArray[i];
						}
					}
					this.typeIndex = parseInt(this.refundList[0].rejectType);
					this.typeLabel = this.typeArray[this.typeIndex];
					this.refundMark = this.refundList[0].refundText;
					this.rejectEvidencePath1 = this.refundList[0].rejectEvidencePath1;
					this.rejectEvidencePath2 = this.refundList[0].rejectEvidencePath2;
					this.rejectEvidencePath3 = this.refundList[0].rejectEvidencePath3;
					let suitIdArr = [];
					let index = [];
					//添加信息
					this.refundList.forEach((item, index2) => {
						if (item.suitId) {
							let id = item.suitId + item.isSample;
						if (!suitIdArr.includes(id)) {
							item.isSuit = true;
							suitIdArr.push(id);
							item.suitRealPrice = 0;
							item.suitRealPrice += this.moneyFormat(item.rejectAmount / item.productsCount);
							index.push({
								num: index2,
								id: id
							});
						} else if (suitIdArr.includes(id)) {
							item.show = 2;
							for (let i = 0; i < index.length; i += 1) {
								if (index[i].id === id) {
									let n = index[i].num;
									this.refundList[n].suitRealPrice += this.moneyFormat(item.rejectAmount / item.productsCount);
								}
							}
						}
						}
						item.remain = JSON.parse(JSON.stringify(item.productsCount));
						item.productRealPrice = this.moneyFormat(item.rejectAmount / item.productsCount);
						item.checked = true;
						item.disabled = true;
					});
				}
			});
		},
		getAddress() {
			this.$http.getRejectAddress().then(res => {
				if (res.status === 0) {
					res.data.records.forEach((item, index) => {
						if (item.defaultFlag === 1) {
							this.people = item.recipients + ' ' + item.tel;
							this.address = item.address;
						}
					});
				}
			});
		},
		paste(value) {
			uni.setClipboardData({
				data: value
			});
		},
		companyChange(e) {
			this.companyIndex = e.target.value;
			this.companyLabel = this.companyArray[this.companyIndex];
		},

		// 提交申请
		submit() {
			if (this.logisticsCode === '') {
				this.$util.msg('请填写物流单号');
				return;
			}

			if (this.companyIndex === '') {
				this.$util.msg('请选择物流公司');
				return;
			}
			let rejectInfo = [];
			this.rejectId.forEach((item, index) => {
				rejectInfo.push({
					rejectExpressOrderNum: this.logisticsCode,
					rejectExpressCompany: this.companyLabel,
					rejectId: item
				});
			});

			const params = {
				rejectEditInfo: rejectInfo
			};
			var that = this;
			this.$http.editReject(params).then(res => {
				if (res.status == 0) {
					uni.showToast({
						icon: 'none',
						title: '申请成功'
					});
					if (this.productFlag || this.isEdit) {
						that.$eventHub.$emit('refundRefresh');
						uni.navigateBack({});
					} else {
						uni.redirectTo({
							url: '../myOrder/returnOrderList'
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.bot-btn-wrap{
	bottom: 0rpx !important;
}
.iosPB {
	padding-bottom: env(safe-area-inset-bottom) !important;
}
.AndroidPB{
	padding-bottom: 20rpx !important;
}
.codeTitle {
	position: relative;
	top: -4px;
}
.codeInput {
	display: inline-block;
	margin-left: 30px;
	width: 69%;
}
.codeView {
	margin-top: 10rpx;
	padding: 20rpx 20rpx;
	background-color: #fff;
}
.imgMark {
	position: absolute;
	width: 100rpx !important;
	height: 100rpx !important;
	top: 0px;
	left: 12rpx;
	z-index: 100;
}
.copeView {
	display: inline-block;
	background-color: #f2f2f2;
	width: 30px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	margin-left: 20px;
}
.tui-item-content {
	color: #666;
	margin-left: 30rpx;
}
.tui-item-title {
	width: 160rpx;
	height: 28rpx;
	flex-shrink: 0;
	font-size: 30rpx;
}
.tui-order-flex {
	display: flex;
	padding-top: 18rpx;
	width: 100%;
	line-height: 24rpx;
	// height: 30rpx;

	.yxf-item-reason {
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx;
		border-radius: 20rpx;
		border: 2rpx solid $borderColor;

		.reason-text {
			margin: 20rpx 1%;
			color: #aaa;
		}

		.reason-img {
			width: 31.3%;
			float: left;
			margin: 10rpx 1%;

			image {
				width: 100%;
				height: 200rpx;
			}
		}
	}
}

.tui-order-flex:first-child {
	padding-top: 0;
}
.tui-order-item {
	margin-top: 20rpx;
	border-radius: 10rpx;
	overflow: hidden;
}

.refundInfo .idCard-upload-inner {
	width: 100rpx;
	height: 100rpx;
	line-height: 100rpx;
}
.refundMark {
	color: #999;
	font-size: 24rpx;
}
.text-view {
	width: 100%;
	margin: 0 auto;
	border-top: 1px solid #e6e6e6;
}
.text-area {
	width: 100%;
	border: 1px solid #e6e6e6;
	margin-top: 10px;
}
.text-area::hover {
	border-color: #3bb4f2;
}
.refundMoney {
	color: #fc5a58;
}
.returnContent {
	color: #666666;
	font-size: 20rpx;
}
.container {
	width: 100%;
	height: 100%;
}
/deep/ .uni-scroll-view::-webkit-scrollbar {
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	display: none;
}
.nodata-wrap {
	width: 100%;
	height: 100%;
	background: #fff;
	.img {
		width: 300rpx;
		height: 300rpx;
		margin: 15% auto 50rpx auto;
		display: block;
		img {
			width: 100%;
			opacity: 0.5;
		}
	}
	.text {
		display: block;
		text-align: center;
		color: #ccc;
	}
}
// /deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before{
// 	color:#fff;
// }
// /deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before{
// 	font-size: 32rpx;
// 	color:$themeColor;
// }
// /deep/ uni-checkbox.gray-checkbox .uni-checkbox-input{
// 	background:$borderColor;
// }
.tui-mtop {
	margin-top: 10rpx;
}

.tui-refund-goods {
	width: 100%;
	border-radius: 12rpx;
	overflow: hidden;
	padding: 20rpx 30rpx 10rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #333;
	font-size: 30rpx;
	background-color: #ffffff;
}

.tui-goods-num {
	font-weight: bold;
	//color: $themeColor;
}

.tui-cart-cell {
	width: 100%;
	background: #ffffff;
	overflow: hidden;
	margin-top: 5rpx;
}
.swipe-action {
	.tui-swipeout-item {
		padding: 30rpx 0;
	}
}
.tui-goods-item-wrap {
	padding: 15rpx 30rpx;
	display: flex;

	.tui-checkbox {
		width: 55rpx;
		display: flex;
		align-items: center;
		float: left;
		margin-right: 10rpx;
	}
	.tui-goods-item {
		flex: 1;
		// width:calc(100%-110rpx);
		display: flex;
		box-sizing: border-box;
	}
}

.tui-goods-img {
	width: 220rpx;
	height: 220rpx !important;
	border-radius: 12rpx;
	flex-shrink: 0;
	display: block;
}

.tui-goods-info {
	flex: 1;
	width: 100%;
	padding-left: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	box-sizing: border-box;
	overflow: hidden;
}

.tui-goods-title {
	white-space: normal;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 26rpx;
	color: #333;
}

.tui-goods-model {
	max-width: 100%;
	color: #333;
	background: #f5f5f5;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16rpx;
	box-sizing: border-box;
}

.tui-model-text {
	max-width: 100%;
	transform: scale(0.9);
	transform-origin: 0 center;
	font-size: 26rpx;
	line-height: 32rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tui-price-box {
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.tui-goods-price {
	font-size: 34rpx;
	font-weight: 500;
	color: $red;
}

.tui-scale {
	transform-origin: 100% 100%;
}

.tui-activity {
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx 20rpx 30rpx;
	box-sizing: border-box;
	height: 110rpx;
}

.tui-buy {
	display: flex;
	align-items: center;
}

.tui-bold {
	font-weight: bold;
}

/*猜你喜欢*/
.tui-youlike {
	padding-left: 12rpx;
}

.tui-product-list {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: wrap;
	box-sizing: border-box;
}

.tui-product-container {
	flex: 1;
	margin-right: 2%;
}

.tui-product-container:last-child {
	margin-right: 0;
}

.tui-pro-item {
	width: 100%;
	margin-bottom: 4%;
	background: #fff;
	box-sizing: border-box;
	border-radius: 12rpx;
	overflow: hidden;
}

.tui-pro-img {
	width: 100%;
	display: block;
}

.tui-pro-content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 20rpx;
}

.tui-pro-tit {
	color: #2e2e2e;
	font-size: 26rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.tui-pro-price {
	padding-top: 18rpx;
}

.tui-factory-price {
	font-size: 24rpx;
	color: #a0a0a0;
	text-decoration: line-through;
	padding-left: 12rpx;
}

.tui-pro-pay {
	padding-top: 10rpx;
	font-size: 24rpx;
	color: #656565;
}


.tui-safe-area {
	height: 1rpx;
	padding-bottom: 200rpx;
}

.tui-invalid-pr {
	// width: 75rpx !important;
}
.tui-invalid-text {
	width: 60rpx;
	// margin-right: 4rpx;
	text-align: center;
	font-size: 24rpx;
	color: #fff;
	background: rgba(0, 0, 0, 0.3);
	transform: scale(0.8);
	transform-origin: center center;
	border-radius: 4rpx;
	flex-shrink: 0;
}
.tui-gray {
	color: #b2b2b2 !important;
}
.tui-flex-center {
	// align-items: center !important;
	margin-bottom: 70rpx;
}
.tui-goods-invalid {
	color: #555;
	font-size: 24rpx;
}
.refundInfo {
	display: flex;
	justify-content: space-between;
	margin-top: 10rpx;
	padding: 20rpx 20rpx;

	background-color: #fff;

	.img {
		width: 80rpx;
		height: 80rpx;
	}
	.setupTitle {
		position: relative;
	}
	.stars {
		color: #f54f46;
		position: absolute;
		top: -10rpx;
		left: 64rpx;
	}
}
.tui-order-content {
	width: 100%;
	padding: 20rpx 20rpx;
	box-sizing: border-box;
	background: #fff;
	font-size: 24rpx;
	line-height: 30rpx;
}

.tui-order-flex {
	display: flex;
	padding-top: 18rpx;
	width: 100%;
	line-height: 24rpx;
	// height: 30rpx;

	.yxf-item-reason {
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx;
		border-radius: 20rpx;
		border: 2rpx solid $borderColor;

		.reason-text {
			margin: 20rpx 1%;
			color: #aaa;
		}

		.reason-img {
			width: 31.3%;
			float: left;
			margin: 10rpx 1%;

			image {
				width: 100%;
				height: 200rpx;
			}
		}
	}
}

.tui-order-flex:first-child {
	padding-top: 0;
}
</style>
